<template>
	<header class="school-header">
		<div :class="getMenuClassName()">
			<div style="max-width: 1600px;">
				<div class="row y-middle">
					<div class="col-lg-2">
						<div class="logo-cat-wrap">
							<div class="logo-part">
								<a href="/home">
									<img :src="logImg" alt="" srcset="">
									<!-- <i class="normal-logo wfls wflsfont wfls-LOGObaise" v-show="isSticky"></i>
                                    <i class="sticky-logo wfls wflsfont wfls-LOGObaise" v-show="!isSticky"></i> -->
								</a>
							</div>
						</div>
					</div>
					<div class="col-lg-8 text-end" style="
    position: relative;
">
						<div class="rs-menu-area">
							<div class="main-menu">
								<div class="mobile-menu">
									<a class="rs-menu-toggle" @click="toggleShow">
										<i class="fa fa-bars"></i>
									</a>
								</div>

								<nav class="rs-menu rs-menu-close" v-show="!isShow">
									<ul class="nav-menu">
										<!-- 使用v-for循环渲染菜单项 -->
										<li class="menu-item-has-children" v-for="menuItem in menuItems"
											:key="menuItem.name">
											<span  class="father-box">{{ menuItem.name }}</span>
											<!-- 如果有子菜单，则渲染 -->
											<ul class="sub-menu" v-if="menuItem.children && menuItem.children.length">
												<li v-for="child in menuItem.children" :key="child.name">
													<a :href="child.link">{{ child.name }}</a>
												</li>
											</ul>
											<!-- 使用aria-haspopup提高可访问性 -->
											<span class="rs-menu-parent"
												v-if="menuItem.children && menuItem.children.length">
												<i class="fa fa-angle-down" aria-hidden="true"></i>
											</span>
										</li>
									</ul>
								</nav>
								<nav class="ml-menu-box" v-show="isShow">
									<div class="menu-box" v-for="menuItem in menuItems">
										<div class="menu-p" @click="toggleSubMenu(menuItem)">
											<span class="menu-hover"> {{ menuItem.name }} </span>
											<span class="menu-fa">
												<i class="fa fa-angle-down" aria-hidden="true"
													v-show="!menuItem.isOpen"></i>
												<i class="fa fa-angle-up" aria-hidden="true"
													v-show="menuItem.isOpen"></i>
											</span>
										</div>
										<div class="menu-ch"
											v-if="menuItem.children && menuItem.children.length && menuItem.isOpen">
											<div class="menu-child menu-hover" v-for="child in menuItem.children"
												:key="child.name">
												{{ child.name }}
											</div>
										</div>
									</div>
								</nav>
							</div>
						</div>
					</div>
					<div class="col-lg-2 text-end">
						<!-- <div class="expand-btn-inner" @mouseenter="toggleSerch" @mouseleave="toggleSerch">
							<i class="fa fa-search search-box"></i>
							<div class="text-start" v-show="isShowSerch">
								<div class="cart-bottom-part">
									<div class="form-group"><input placeholder="搜索..." type="text" class="form-control">
										<span type="submit" value="" class="searchBtn"><i
												class="fa fa-search"></i></span>
									</div>
								</div>
							</div>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</header>
</template>
<script setup>
	import {
		ref,
		defineProps,
		onMounted,
		onUnmounted
	} from 'vue';
	import logImg from '@/assets/640.gif'
	const props = defineProps({
		isSticky: {
			type: Boolean,
			default: true
		}
	})
	// 定义菜单数据
	const menuItems = ref([{
			name: '学校概况',
			link: '#',
			children: [{
					name: '一中简介',
					link: ''
				},
				{
					name: '现任领导',
					link: ''
				},
				{
					name: '组织机构',
					link: ''
				},
				{
					name: '历史与荣誉',
					link: ''
				},
				// ... 其他子菜单项
			]
		},
		{
			name: '招生指南',
			link: '#',
			children: [
				{
					name: '招生指南',
					link: ''
				},
				{
					name: '招生宣传册',
					link: ''
				},
				// ... 其他子菜单项
			]
		},
		{
			name: '党建工作',
			link: '#',
			children: [{
					name: '党办公告',
					link: ''
				},
				{
					name: '理论学习',
					link: ''
				},
				{
					name: '党员活动',
					link: ''
				},
				{
					name: '创先争优',
					link: ''
				},
				// ... 其他子菜单项
			]
		},
		{
			name: '一中之窗',
			link: '#',
			children: [{
					name: '校园风采',
					link: ''
				},
				{
					name: '一中快讯',
					link: ''
				},
				{
					name: '通知公告',
					link: ''
				},
				{
					name: '一中视频',
					link: ''
				},
				{
					name: '文化与交流',
					link: ''
				},
				// ... 其他子菜单项
			]
		},
		{
			name: '校友天地',
			link: '#',
			children: [{
					name: '校友会',
					link: ''
				},
				{
					name: '校友活动',
					link: ''
				},
				{
					name: '校友故事',
					link: ''
				},
				// ... 其他子菜单项
			]
		},
		// ... 其他菜单项
	]);

	// 控制子菜单的显示与隐藏
	const toggleSubMenu = (menuItem) => {
		menuItems.value.forEach(item => {
			if (item !== menuItem) {
				item.isOpen = false;
			}
		});
		menuItem.isOpen = !menuItem.isOpen;
	};
	const getMenuClassName = () => {
		return props.isSticky ? 'menu-area menu-sticky' : 'menu-area'
	}
	const isShow = ref(false);
	const toggleShow = () => {
		isShow.value = !isShow.value;
	}
	// 定义一个响应式变量来存储窗口宽度
	const windowWidth = ref(window.innerWidth);

	// 定义一个处理窗口大小变化的函数
	const handleResize = () => {
		windowWidth.value = window.innerWidth;
		if (windowWidth.value < 992) {
			isShow.value = false;
		}
		// 在这里可以添加根据窗口宽度变化需要执行的逻辑
	};

	// 在组件挂载时添加事件监听器
	onMounted(() => {
		window.addEventListener('resize', handleResize);
	});

	// 在组件卸载时移除事件监听器
	onUnmounted(() => {
		window.removeEventListener('resize', handleResize);
	});
	const isShowSerch = ref(false);
	const toggleSerch = () => {
		isShowSerch.value = !isShowSerch.value;
	}
</script>
<style scoped lang="scss">
	ul {
		list-style: outside none none;
		margin: 0px;
		padding: 0px;
	}

	.school-header {
		position: fixed;
		z-index: 999;
		width: 100vw;

		.menu-area {
			height: 120px;
			display: flex;
			align-items: center;
			background-color: #fff;

			a {
				color: var(--text-color) !important;
			}

			a:hover {
				color: var(--text-hover) !important;
			}

			.sub-menu {
				background: var(--background-color) !important;
				border-bottom: 5px solid var(--border-color) !important;

				a {
					color: var(--text-color) !important;
				}

				li:hover>a {
					color: var(--text-high) !important;
				}
			}

			.cart-bottom-part {
				border-bottom: 5px solid var(--border-color);
				border-color: var(--border-color) !important;
			}
		}

		.menu-sticky {
			background: linear-gradient(#555, transparent) !important;
			box-shadow: unset !important;
			margin: 0;
			z-index: 999;
			width: 100%;
			top: 0;
			position: relative;

			a {
				color: var(--text-color-high) !important;
			}

			a:hover {
				color: var(--text-hover-high) !important;
			}

			.sub-menu {
				border-bottom: 5px solid var(--border-color-high) !important;

				a {
					color: var(--text-color) !important;
				}

				li:hover>a {
					color: var(--text-hover-high) !important;
				}
			}

			.cart-bottom-part {
				border-bottom: 5px solid var(--border-color-high);
				border-color: var(--border-color-high) !important;
			}
		}

		.container {
			padding: 0 15px;

			a {
				text-decoration: none;
			}

			.row {
				margin-left: -15px;
				margin-right: -15px;
			}

			.y-middle {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}

			.logo-cat-wrap {
				display: flex;
				height: 90px;
				line-height: 90px;
			}

			.logo-part {
				position: relative;
				z-index: 9;
			}

			.normal-logo {
				color: #fff;
			}

			.logo-part i {
				font-size: 50px;
			}

			.sticky-logo {
				color: #234b7e;
			}

			.text-end {
				text-align: right !important;
			}

			.rs-menu-area {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}



			.rs-menu-toggle {
				color: #21a7d0;
				text-align: right;
			}

			.rs-menu {
				display: block;
				float: left;
				clear: both;
				width: 100%;
				font-size: 0;

				ul {
					border: 0;
					margin: 0;
					padding: 0;
					list-style: outside none none;

					ul {
						position: absolute;
						top: 100%;
						opacity: 0;
						visibility: hidden;
						transform: translateY(-10px);
						transform: scaleY(0);
						transform-origin: 0 0 0;
						transition: all .3s ease-in-out;
					}

					.menu-item-has-children {
						display: inline-block;
						margin-right: 50px;
						padding: 0;
						cursor: pointer;
					}

					.menu-item-has-children .father-box {
						font-weight: 600 !important;
						padding-right: 18px !important;
						transition: all .3s ease;
						font-size: 15px;
						font-weight: 700;
						text-transform: uppercase;
						height: 90px;
						line-height: 90px;
						padding-right: 0;
						margin-right: -12px;
						z-index: 1;
						position: relative;
					}

					.menu-item-has-children .father-box:before {
						content: "+";
						position: absolute;
						left: auto;
						right: 0;
						top: 50%;
						text-align: center;
						display: block;
						cursor: pointer;
						transform: translateY(-50%);
						transition: all .5s ease;
					}
				}
			}

			.rs-menu.rs-menu-close {
				background: transparent;
			}

			.rs-menu li:hover>.sub-menu {
				display: block;
				/* 悬停时显示子菜单 */
			}

			.rs-menu ul.sub-menu {
				display: none;
				min-width: 250px;
				padding-bottom: 30px;
				padding-top: 30px;
				border-radius: 0;
				border-bottom: 5px;
				box-shadow: 0 0 20px rgba(0, 0, 0, .15);
				z-index: 99;
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
				transform: scaleY(1);

				li {
					margin: 0px;
					padding: 0px;
					padding: 10px 30px;
					text-align: left;
				}

				li a {
					transition: all .3s ease;
					font-size: 15px;
					font-weight: 700;
					text-transform: uppercase;
					height: 90px;
					line-height: 90px;
					padding-right: 0;
					margin-right: -12px;
					z-index: 1;
					position: relative;
					height: unset;
					line-height: unset;
					font-weight: 400;
					text-transform: capitalize;
				}
			}
		}

		.expand-btn-inner {
			justify-content: end;
			align-items: center;
			height: 90px;
			min-width: 120px;
			display: flex;
			position: relative;

			.user-icon {

				line-height: 120px;
				height: 120px;
				display: flex;
				align-items: center;
			}

			.woocommerce-mini-cart {
				position: absolute;
				right: 0;
				top: 200%;
				transition: all .3s ease;
				width: 270px;
				opacity: 0;
				visibility: hidden;
				overflow: hidden;
			}

			.cart-bottom-part {
				padding: 30px 20px;
				background-color: #fff;
			}

			.form-group {
				position: relative;
			}
		}
	}

	.mobile-menu {
		display: none;
	}

	.menu-area .main-menu .rs-menu ul.nav-menu li:last-child {
		margin-right: 0 !important;
	}

	@media screen and (max-width: 1199px) {
		.menu-area .main-menu .rs-menu ul.nav-menu li {
			margin-right: 35px;
		}

		.menu-area .rs-menu-area {
			justify-content: right;
		}


	}

	@media screen and (max-width: 1000px) {
		.mobile-menu {
			display: block;
		}

		.rs-menu {
			display: none !important;
		}



		.rs-menu-toggle {
			display: block;
			text-align: right;
			position: relative;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
			color: #333 !important;
			font-size: 22px;
			text-transform: uppercase;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}

		.logo-part {
			z-index: 9;
			position: fixed !important;
			top: 0px !important;
		}

		.logo-part i {
			font-size: 35px !important;
		}

		.search-box {
			display: none !important;
		}
	}

	.search-box {
		color: #fff;

	}

	.search-box:hover {
		color: #eea522;
		cursor: pointer;
	}

	.form-group span {
		position: absolute;
		right: 1px;
		top: 1px;
		width: 34px;
		height: 34px;
		text-align: center;
		line-height: 34px;
		background: #f3f3f3;
		transition: all .3s ease;
	}

	.form-group span:hover {
		background: #eea522;
		color: #fff;
		cursor: pointer;
	}

	.text-start {
		position: absolute;
		top: 90px;
		right: 0px;
		width: 230px;
	}

	.ml-menu-box {
		// overflow: hidden;
		height: 348px;
		background-color: #fff;
		position: absolute;
		z-index: 999;
		top: 60px;
		right: 0px;
		left: 0px;
		margin: auto;
		width: calc(100vw - 40px);

		.menu-p {
			user-select: none;
			// height: 70px;
			// line-height: 70px;
			color: #505050;
			font-weight: 600;
			padding-left: 18px;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}

		.menu-box {
			border-bottom: 1px solid #131313;
			position: relative;
		}

		.menu-box:last-child {
			.menu-fa {
				// height: 67px;
				// line-height: 67px;
			}

			border-bottom: none;
		}

		.menu-fa {
			display: block;
			height: 69px;
			line-height: 69px;
			width: 45px;
			text-align: center;
			cursor: pointer;
			background: #ddd;
		}

		.menu-ch {
			padding-top: 10px;
			background-color: #fff;
			border-bottom: 5px solid #eea522;
			border-color: #eea522;
			position: absolute;
			margin: auto;
			top: 71px;
			left: 0px;
			right: 0px;
			z-index: 9;
		}

		.menu-child {
			user-select: none;
			text-align: left;
			padding: 10px 30px;
		}
	}
</style>